<template>
  <!--  卡片区域  -->
  <n-card>
    <!--  工具栏  -->
    <n-space justify="end" style="padding-bottom: 15px;">
      <!--  新建按钮  -->
      <n-button @click="showModal = true" type="info" style="width: 80px; height:30px;">
        <n-icon size="18">
          <add/>
        </n-icon>
        新建
      </n-button>
      <!--  刷新  -->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button text style="font-size: 20px; width: 22px; height: 32px;" @click="refresh">
            <n-icon>
              <refresh-sharp/>
            </n-icon>
          </n-button>
        </template>
        <span>刷新</span>
      </n-tooltip>
      <!--  密度  -->
      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button text style="font-size: 20px; width: 22px; height: 32px; margin-left: 11px">
              <n-icon>
                <auto-fit-height20-regular/>
              </n-icon>
            </n-button>
          </template>
          <span>密度</span>
        </n-tooltip>
      </n-popselect>
      <!--  列设置  -->
      <n-tooltip tirgger="hover">
        <template #trigger>
          <n-popover teigger="click" placement="bottom-end">
            <template #trigger>
              <n-button text style="font-size: 20px; width: 22px; height: 32px; margin-bottom: 2px; margin-left: 11px">
                <n-icon>
                  <Settings20Regular/>
                </n-icon>
              </n-button>
            </template>
            <template #header>
              <n-checkbox label="列展示" v-model:checked="allChecked" @update:checked="allChange" />
            </template>
            <n-space vertical>
              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />
            </n-space>
          </n-popover>
        </template>
        <span>列设置</span>
      </n-tooltip>
    </n-space>
    <!--  数据表格  -->
    <n-data-table
        :columns="columns"
        :data="data"
        :row-key="rowKey"
        :size="densityValue"
        :bordered="false"
        default-expand-all
        :pagination="pagination"
        :loading="loading"
        :rules="rules"
    />
  </n-card>
  <!--  新建模态框  -->
  <n-modal v-model:show="showModal" preset="card" :style="bodyStyle" title="添加行业" :segmented="segmented">
    <!--  表单  -->
    <n-form  :model="formValue" :rules="rules">
      <n-form-item label="行业名称" path="user.name">
        <n-input
            v-model:value="formValue.user.name"
            placeholder="请输入行业名称"
            clearable
        >
        </n-input>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancel">取消</n-button>
        <n-button type="info" @click="sure">确定</n-button>
      </n-space>
    </template>
  </n-modal>
  <!--新建子类拟态框-->
  <n-modal v-model:show="showModal1" preset="card" :style="bodyStyle" title="添加子类行业" :segmented="segmented">
    <!--  表单  -->
    <n-form  :model="formValue1" :rules="rules1">
      <n-form-item label="行业名称" path="user.name">
        <n-input
            v-model:value="formValue1.user.name"
            placeholder="请输入行业名称"
        >
        </n-input>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancel1">取消</n-button>
        <n-button type="info" @click="sure1">确定</n-button>
      </n-space>
    </template>
  </n-modal>
  <!--  编辑模态框  -->
  <n-modal v-model:show="showEditModal" preset="card" :style="bodyStyle" title="编辑" :segmented="segmented">
    <!--  表单  -->
    <n-form  :model="formEditValue" :rules="rulesEdit">
      <n-form-item label="行业名称" path="user.name">
        <n-input
            v-model:value = "formEditValue.user.name"
            clearable
            placeholder="请输入行业名称"
        >
        </n-input>
      </n-form-item>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="cancelEdit">取消</n-button>
        <n-button type="info" @click="sureEdit">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>
<<<<<<< HEAD



<script>
import { defineComponent, h, ref, reactive } from "vue";
import { NButton, NForm, NFormItem, NInput, NFlex, NIcon } from "naive-ui"
import {Add} from "@vicons/ionicons5";
import {RefreshSharp} from "@vicons/material";
import {AutoFitHeight20Regular, Settings20Regular} from "@vicons/fluent";
import {LeftOutlined, RightOutlined} from "@vicons/antd";
import { GetIndustry, AddIndustry, RenewIndustry, DeleteIndustry  } from "@/api/industry";

  export default defineComponent({
    components: {
      Add,
      RefreshSharp,
      AutoFitHeight20Regular,
      Settings20Regular,
      LeftOutlined,
      RightOutlined
    },

    setup(){
      const message = window.$message
      const dialog = window.$dialog
      // 加载
      const loading = ref(false)

      // 创建表格列模板
      const createColumns = () => {
        return [
          {
            title: "序号",
            key: "index",
            render(row, index) {
                   return  index + 1;
            }
          },
          {
            title: "名称",
            key: "name",
          },
          {
            title: "编辑时间",
            key: "time",
          },
          {
            title: "操作",
            key: "actio ns",
           render(row){
               switch (row.actions){
                 case 0:
                   return h(
                           NFlex,
                           {
                             size: "small",
                           },
                           {
                             default: () => [
                               h(
                                   NButton,
                                   {
                                     text: true,
                                     color: "#3FA2FE",
                                     onClick: () => {
                                       showModal1.value=true
                                       addpid.value=row.id
                                     }
                                   },
                                   { default: () => "新增子类" }
                               ) ,
                               h(
                                   NButton,
                                   {
                                     text: true,
                                     color: "#3FA2FE",
                                     onClick: () => {
                                       showEditModal.value=true
                                       formEditValue.value.user.name=row.name
                                       Editid.value=row.id
                                     }
                                   },
                                   { default: () => "编辑" }
                               )
                             ]
                           }

                   )
                 case 1:
                   return h(
                       NFlex,
                       {
                         size: "small",
                       },
                       {
                         default: () => [
                           h(
                               NButton,
                               {
                                 text: true,
                                 color: "#3FA2FE",
                                 onClick: () => {
                                    showModal1.value=true
                                    addpid.value =row.id
                                 }
                               },
                               { default: () => "新增子类" }
                           ) ,
                           h(
                               NButton,
                               {
                                 text: true,
                                 color: "#3FA2FE",
                                 onClick: () => {
                                   showEditModal.value=true
                                   formEditValue.value.user.name=row.name
                                   Editid.value=row.id
                                 }
                               },
                               { default: () => "编辑" }
                           ),
                           h(
                               NButton,
                               {
                                 text: true,
                                 color: "#3FA2FE",
                                 onClick: () => {
                                   dialog.warning({
                                     title: "删除",
                                     content: '确定删除吗？',
                                     positiveText: '确定',
                                     negativeText: '取消',
                                     maskClosable: false,
                                     onNegativeClick: () => {
                                       message.success('取消删除')
                                     },
                                     onPositiveClick: () => {
                                       message.success('确定删除')

                                       let getData = () => {
                                         let per_page = ref(100)
                                         const param = {
                                           page: page.value,
                                           per_page: per_page.value
                                         }
                                         GetIndustry(param).then(j => {
                                           const content = j.data.list
                                           console.log(content)
                                           content.forEach((item) => {
                                             if (item.name === row.name) {
                                               row.id = item.id
                                               DeleteIndustry(row.id).then(res => {
                                                 if (res.code === 0) {
                                                   message.success(res.message)
                                                   // 更新数据
                                                   window.location.reload()
                                                 } else {
                                                   message.error(res.message)
                                                 }
                                               })
                                             }
                                           })
                                         })
                                       }
                                      getData()
                                     }
                                   })
                                 }
                               },
                               { default: () => "删除" }
                           )
                         ]
                       }

                   )
               }

           }
          }
        ]
      }
      // 调用列模板
      let columns = createColumns()
      // 表格数据
      let data = reactive([])
      // 总条数
      const total = ref(0);
      // 总页数
      const totalPage = ref(0);
      // 当前页
      const page = ref(0);
      // 分页设置
      const pagination = {
        prev:()=>{
          return h(
              NIcon,
              {
                onClick:()=>{
                  if (page.value > 1) {
                    page.value --
                  }
                }
              },
              {
                default: () => h(LeftOutlined)
              }
          )
        },
        next:()=>{
          return h(
              NIcon,
              {
                onClick:()=>{
                  // console.log(lastPage.value)
                  if (page.value < totalPage.value) {
                    // if (page.value === lastPage.value){
                    page.value ++
                    // getData(loading.value)
                    // }
                  }
                }
              },
              {
                default: () => h(RightOutlined)
              }
          )
        },
        prefix:()=>{
          const range = [page.value * 10 - 9, page.value * 10];
          if (page.value === 0) {
            return `第 0 - 0 条 / 总共 ${total.value} 条`
          }else if (page.value === 1 && totalPage.value !== 1) {
            return `第 1 - ${range[1]} 条 / 总共 ${total.value} 条`;
          }else if (page.value === totalPage.value) {
            return `第 ${range[0]} - ${data.length} 条 / 总共 ${total.value} 条`;
          }else if (page.value > 1 && page.value < totalPage.value) {
            return `第 ${range[0]} - ${range[1]} 条 / 总共 ${total.value} 条`;
          }
        },
      }
    //获取行业列表
      let getData = ()=> {
        let per_page = ref(100)
        const param = {
          page:page.value,
          per_page:per_page.value
        }
        loading.value=true
        GetIndustry(param).then(res=>{
          const content = res.data.list

          console.log(content);
          // 转换数据库时间格式为标准时间格式方法
          let getDate = (time)=> {
            const dateTime = new Date(time)
            const year = dateTime.getFullYear()
            let month = (dateTime.getMonth() + 1)
            month =  month >= 10 ? month: `0${month}`
            let date = dateTime.getDate()
            date = date >= 10? date : `0${date}`
            let hour = dateTime.getHours()
            hour = hour >= 10? hour : `0${hour}`
            let minute = dateTime.getMinutes()
            minute = minute >= 10? minute : `0${minute}`
            let second = dateTime.getSeconds()
            second = second >= 10? second : `0${second}`
            return `${year}-${month}-${date} ${hour}:${minute}:${second}`
          }
          // 遍历数据库数据
          //将 level=0 的 添加到data中
          content.forEach((item)=>{
            // console.log(item,'4444')
               if(item.level===0){
                 data.push({
                   id:item.id,
                   level:item.level,
                   name:item.name,
                   time:getDate(item.updatedAt),
                   children:[],
                   actions:item.level
                 })
               }
          })
          // console.log(data,'----');
          //将 level=1 的 添加到data中
      content.forEach((item)=>{
        if(item.level===1){
          // console.log(item,'5555')
          data.forEach(i =>{
            if(i.id===item.pid){
                i.children.push({
                  id:item.id,
                  name:item.name,
                  pid:item.pid,
                  level:item.level,
                  time:getDate(item.updatedAt),
                  actions:item.level
                })
             }
                })
             }
          })


          console.log(data);
          total.value = res.meta.total
          // totalPage.value = Math.ceil(total.value / 10)
          totalPage.value = Math.ceil(data.length / 10)
          // lastPage.value = Math.ceil(data.length / 10)
          page.value = 1
          loading.value = false
        })
      }
      getData()
      /*工具栏*/
      /* 新建,编辑 */
      // 显示新建-模态框
      const showModal = ref(false)
      //显示新建子类-拟态框
      const showModal1=ref(false)
      // 显示编辑-模态框
      const showEditModal = ref(false)
      // 模态框的样式
      const bodyStyle = {
        width: "640px",
      }
      const segmented = {
        content: "soft",
        footer: "soft",
      }
      // 取消新建-模态框
      function cancel() {
        showModal.value = false
      }
      // 取消编辑-模态框
      function cancelEdit() {
        showEditModal.value = false
      }
      //取消新建子类-模拟框
      function cancel1(){
        showModal1.value=false
      }
      let addid =ref()
      //新建-确定提交
        function sure() {
          let formData ={
            name: formValue.value.user.name,
            id:addid.value
          }
          // 添加到数据库
          AddIndustry(formData).then(res => {
            // console.log(res)
            if (res.code === 0) {
              message.success(res.message)
              cancel()
              // 刷新数据
              window.location.reload()
            } else {
              message.error(res.message)
            }
          })
        }
        let addpid= ref()
      //新建子类-确定提交
       function sure1(){
        let  formData1 ={
          name: formValue1.value.user.name,
          pid: addpid.value
        }
        //添加到数据库中
         AddIndustry(formData1).then(res =>{
           console.log(res);
           if (res.code === 0) {
             message.success(res.message)
             cancel1()
             window.location.reload()
           } else {
             message.error(res.message)
           }
         })
       }
       let Editid=ref()
      //编辑-确定提交
      function sureEdit(){
        let formData2={
          name:formEditValue.value.user.name,
          id:Editid.value
        }
        //将更新添加到数据库里
          RenewIndustry(formData2).then(res =>{
            console.log(res);
            if (res.code === 0) {
              message.success(res.message)
              cancel1()
              window.location.reload()
            } else {
              message.error(res.message)
            }
        })
      }

      // 新建-表单信息
      const formValue = ref({
        user: {
          name: "",
        }
      })
      //新建子类-表单信息
      const formValue1 =ref({
        user:{
          name:""
        }
      })
      // 编辑-表单信息
      const formEditValue = ref({
        user: {
          name: '',
        }
      })

      // 新建验证规则
      const rules = {
        user: {
          name: {
            required: true,
            trigger: "blur",
            message: "请输入行业名称!"
          },
        }
      }
      //新建子类验证规则
      const rules1={
        user:{
          name:{
            required: true,
            trigger: "blur",
            message: "请输入行业名称!"
          }
        }
      }
      // 编辑验证规则
      const rulesEdit = {
        user: {
          name: {
            required: true,
            trigger: "blur",
            message: "请输入行业名称!"
          }
        }
      }
      /*刷新*/
      //刷新
      function refresh() {
        window.location.reload()
      }
      // 密度
      // 密度事件数据
      const densityOptions = [
        {
          label: "默认",
          value: "large"
        },
        {
          label: "中等",
          value: "medium"
        },
        {
          label: "紧密",
          value: "small"
        }
      ]
      // 默认密度
      const densityValue = ref('medium')

      /* 列设置 */
      // 复选框全选
      const allChecked = ref(true)
      // 复选框列表
      const checkboxList = ref([])
      // 列表添加数据
      for (let i = 0; i < columns.length; i++){
        checkboxList.value.push({name: columns[i].title, checked: true})
      }
      // 全选改变事件
      const allChange = () =>{
        if (allChecked.value) {
          checkboxList.value.forEach(item => {item.checked = true})
        } else {
          checkboxList.value.forEach(item => {item.checked = false})
        }
      }
      // 复选框单个改变事件
      const itemChange = () => {
        if (checkboxList.value.every(item => item.checked)) {
          allChecked.value = true
        } else {
          allChecked.value = false
        }
      }


      return {
        rowKey: (row) => row.name,
        columns,
        data,
        //刷新
        refresh,
        densityValue,
        pagination,
        page,
        loading,
        showModal,
        showEditModal,
        bodyStyle,
        segmented,
        cancel,
        cancelEdit,
        sure,
        sureEdit,
        itemChange,
        densityOptions,
        formValue,
        formEditValue,
        rules,
        rulesEdit,
        formValue1,
        rules1,
        showModal1,
        sure1,
        cancel1,
        Editid,
        checkboxList,
        allChange,
        allChecked
      }
    }
  })

</script>
<style>


</style>
















































<!--<template>-->

<!--</template>-->

<!--<script>-->
<!--import { defineComponent, reactive } from "vue";-->

<!--export  default defineComponent({-->
<!--  name: "position",-->
<!--  setup(){-->

<!--    const data = reactive([])-->

<!--    const students = [-->
<!--      {class: '一班',name: '张三', age: '18', sex: '男'},-->
<!--      {class: '一班',name: '李四', age: '18', sex: '男'},-->
<!--      {class: '一班',name: '王五', age: '18', sex: '女'},-->
<!--      {class: '一班',name: '李华', age: '18', sex: '男'},-->
<!--      {class: '一班',name: '王丽', age: '18', sex: '女'},-->
<!--      {class: '一班',name: '小明', age: '18', sex: '男'},-->
<!--      {class: '一班',name: '小红', age: '18', sex: '女'},-->
<!--      {class: '一班',name: '小花', age: '18', sex: '男'},-->
<!--      {class: '一班',name: '赵钱', age: '18', sex: '男'},-->
<!--      {class: '一班',name: '王麻子', age: '18', sex: '男'},-->
<!--    ]-->




<!--    console.log(students)-->


<!--    students.forEach((item, index) => {-->
<!--      data.push({-->
<!--        index: index,-->
<!--        class: item.class,-->
<!--        name: item.name,-->
<!--        age: item.age,-->
<!--        sex: item.sex,-->
<!--      })-->
<!--    })-->

<!--    console.log(data)-->


<!--  }-->

<!--})-->
<!--</script>-->

<!--<style>-->

<!--</style>-->






























































































<!--<template>-->

<!--  &lt;!&ndash;  卡片区域  &ndash;&gt;-->
<!--  <n-card>-->
<!--    &lt;!&ndash;    工具栏    &ndash;&gt;-->
<!--    <n-space justify="end" style="padding-bottom: 15px;">-->
<!--      &lt;!&ndash;  新建按钮    &ndash;&gt;-->
<!--      <n-button @click="showModal = true" type="info" style="width: 80px; height: 30px">-->
<!--        <n-icon size="18">-->
<!--          <add/>-->
<!--        </n-icon>-->
<!--        新建-->
<!--      </n-button>-->
<!--      &lt;!&ndash;刷新&ndash;&gt;-->
<!--      <n-tooltip trigger="hover">-->
<!--        <template #trigger>-->
<!--          <n-button text style="font-size: 20px; width:22px; height:32px;" @click="refresh">-->
<!--            <n-icon>-->
<!--              <refresh-sharp />-->
<!--            </n-icon>-->
<!--          </n-button>-->
<!--        </template>-->
<!--        <span>刷新</span>-->
<!--      </n-tooltip>-->
<!--      &lt;!&ndash;密度&ndash;&gt;-->
<!--      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">-->
<!--        <n-tooltip trigger="hover">-->
<!--          <template #trigger>-->
<!--            <n-button text style="font-size: 20px; width:22px; height:32px; margin-left: 11px">-->
<!--              <n-icon>-->
<!--                <auto-fit-height20-regular />-->
<!--              </n-icon>-->
<!--            </n-button>-->
<!--          </template>-->
<!--          <span>密度</span>-->
<!--        </n-tooltip>-->
<!--      </n-popselect>-->
<!--      &lt;!&ndash;列设置&ndash;&gt;-->
<!--      <n-tooltip trigger="hover">-->
<!--        <template #trigger>-->
<!--          <n-popover trigger="click" placement="bottom-end">-->
<!--            <template #trigger>-->
<!--              <n-button text style="font-size: 20px; width:22px; height:32px; margin-bottom: 2px; margin-left: 11px">-->
<!--                <n-icon>-->
<!--                  <Settings20Regular />-->
<!--                </n-icon>-->
<!--              </n-button>-->
<!--            </template>-->
<!--            <template #header>-->
<!--              <n-checkbox label="列展示" v-model:checked="allChecked" @update:checked="allChange" />-->
<!--            </template>-->
<!--            <n-space vertical>-->
<!--              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />-->
<!--            </n-space>-->
<!--          </n-popover>-->
<!--        </template>-->
<!--        <span>列设置</span>-->
<!--      </n-tooltip>-->
<!--    </n-space>-->
<!--    &lt;!&ndash;    数据表格    &ndash;&gt;-->
<!--    <n-data-table-->
<!--        :columns="columns"-->
<!--        :data="data"-->
<!--        :pagination="pagination"-->
<!--        :bordered="false"-->
<!--        :size="densityValue"-->
<!--        :loading="loading"-->
<!--        :row-key="rowKey"-->
<!--        default-expand-all-->
<!--    />-->
<!--  </n-card>-->
<!--  &lt;!&ndash;  打开的拟态框  &ndash;&gt;-->
<!--  <n-modal-->
<!--      v-model:show="showModal"-->
<!--      preset="card"-->
<!--      :style="bodyStyle"-->
<!--      title="添加行业"-->
<!--      :segmented="segmented"-->
<!--  >-->
<!--    &lt;!&ndash;表单&ndash;&gt;-->
<!--    <n-form-->
<!--        :rules="rules"-->
<!--        :model="formValue"-->
<!--        :validate-messages="messages"-->
<!--    >-->
<!--      <n-form-item path="user.name" label="用户名">-->
<!--        <n-input-->
<!--            clearable-->
<!--            v-model:value="formValue.user.name"-->
<!--            placeholder="请输入用户名"-->
<!--        >-->
<!--        </n-input>-->
<!--      </n-form-item>-->

<!--      <n-form-item path="user.password" label="密码">-->
<!--        <n-input-->
<!--            show-password-on="click"-->
<!--            placeholder="请输入密码"-->
<!--            v-model:value="formValue.user.password"-->
<!--            type="password"-->
<!--        >-->
<!--        </n-input>-->
<!--      </n-form-item>-->
<!--      <n-form-item path="user.mobile" label="联系电话">-->
<!--        <n-input-->
<!--            clearable-->
<!--            v-model:value="formValue.user.mobile"-->
<!--            placeholder="请输入联系电话"-->
<!--        >-->
<!--        </n-input>-->
<!--      </n-form-item>-->
<!--      <n-form-item label="账号状态">-->
<!--        <n-select-->
<!--            v-model:value="selectValue"-->
<!--            :options="selectOptions"-->
<!--            placeholder="请选择账号状态"-->
<!--            clearable-->
<!--        />-->
<!--      </n-form-item>-->
<!--      <n-form-item label="账号头像">-->
<!--        <n-upload list-type="image-card">-->
<!--          <n-space vertical>-->
<!--            <n-icon size="18">-->
<!--              <add/>-->
<!--            </n-icon>-->
<!--            上传图片-->
<!--          </n-space>-->
<!--        </n-upload>-->
<!--      </n-form-item>-->

<!--    </n-form>-->
<!--    <template #footer>-->
<!--      <n-space justify="end">-->
<!--        <n-button @click="cancel">取消</n-button>-->
<!--        <n-button type="info" @click="sure">确定</n-button>-->
<!--      </n-space>-->
<!--    </template>-->
<!--  </n-modal>-->

<!--</template>-->

<!--<script>-->
<!--import {defineComponent, h, reactive, ref ,onMounted} from 'vue'-->
<!--import {NButton, NForm, NFormItem, NInput, NTag, NFlex, NIcon} from "naive-ui";-->
<!--import { Add } from "@vicons/ionicons5"-->
<!--import { RefreshSharp } from "@vicons/material"-->
<!--import { AutoFitHeight20Regular ,Settings20Regular} from "@vicons/fluent"-->
<!--import { LeftOutlined , RightOutlined} from "@vicons/antd"-->
<!--// 引入行业管理的 axios-->
<!--import {GetIndustry,RenewIndustry,DeleteIndustry,AddIndustry} from '@/api/industry'-->

<!--export default defineComponent({-->
<!--  components: {-->
<!--    Add,-->
<!--    RefreshSharp,-->
<!--    AutoFitHeight20Regular,-->
<!--    Settings20Regular,-->
<!--    LeftOutlined,-->
<!--    RightOutlined-->
<!--  },-->
<!--  setup(){-->
<!--    const message = window.$message-->

<!--    /*  数据表格  */-->
<!--    // 创建表格列模版-->
<!--    const createColumns = ({ play }) => {-->
<!--      return [-->
<!--        {-->
<!--          title: "序号",-->
<!--          key: "index",-->
<!--          render(row, index) {-->
<!--            return index + 1;-->
<!--          }-->
<!--        },-->
<!--        {-->
<!--          title: "用户名",-->
<!--          key: "name",-->
<!--        },-->
<!--        {-->
<!--          title: "编辑时间",-->
<!--          key: "time",-->
<!--        },-->
<!--        {-->
<!--          title: "操作",-->
<!--          key: "actions",-->
<!--          fixed:'left',-->
<!--          render(row) {-->
<!--            return h(-->
<!--                NFlex,-->
<!--                {-->
<!--                  size: "small",-->
<!--                },-->
<!--                {-->
<!--                  default: () => [-->
<!--                    h(-->
<!--                        NButton,-->
<!--                        {-->
<!--                          text: true,-->
<!--                          color: "#3FA2FE",-->
<!--                          onClick: () => play(row)-->
<!--                        },-->
<!--                        { default: () => "编辑" }-->
<!--                    ),-->
<!--                    h(-->
<!--                        NButton,-->
<!--                        {-->
<!--                          text: true,-->
<!--                          color: "#3FA2FE",-->
<!--                          onClick: () => play(row)-->
<!--                        },-->
<!--                        { default: () => "删除" }-->
<!--                    )-->
<!--                  ]-->
<!--                }-->
<!--            )-->
<!--          }-->
<!--        }-->
<!--      ];-->
<!--    };-->
<!--    const columns = createColumns( {play(row) {message.info(`Play ${row.title}`)} })-->
<!--    // 表格数据-->
<!--    // let data = reactive([]);-->
<!--    // 获取用户列表数据-->
<!--  /*  let getData = ()=>{-->
<!--      GetIndustry().then(res => {-->
<!--        console.log(res)-->

<!--        // 数据化时间-->
<!--        let getTime = (time)=> {-->
<!--          const dateTime = new Date(time)-->
<!--          const year = dateTime.getFullYear()-->
<!--          let month = (dateTime.getMonth() + 1)-->
<!--          month =  month >= 10 ? month: `0${month}`-->
<!--          let date = dateTime.getDate()-->
<!--          date = date >= 10? date : `0${date}`-->
<!--          let hour = dateTime.getHours()-->
<!--          hour = hour >= 10? hour : `0${hour}`-->
<!--          let minute = dateTime.getMinutes()-->
<!--          minute = minute >= 10? minute : `0${minute}`-->
<!--          let second = dateTime.getSeconds()-->
<!--          second = second >= 10? second : `0${second}`-->
<!--          return `${year}-${month}-${date} ${hour}:${minute}:${second}`-->
<!--        }-->

<!--        const content = res.data.list-->

<!--        content.forEach((item, index) => {-->
<!--          data.push({-->
<!--            key: index,children:[{index:1,name:item.name}],-->
<!--            name: item.name,-->
<!--            time: getTime(item.updatedAt)-->
<!--          })-->
<!--        })-->
<!--        total.value = data.length-->
<!--      })-->
<!--    }*/-->

<!--    const data = [-->
<!--      {name:'专业服务',time:'2023-08-23 21:23:00',},-->
<!--      {name:'专业服务',time:'2023-08-23 21:23:00',},-->
<!--    ];-->
<!--    // 总条数-->
<!--    const total = ref(data.length);-->
<!--    // 总页数-->
<!--    const page = ref(Math.ceil(data.length / 10));-->
<!--    // 当前所在页数-->
<!--    const currentPage = ref(1);-->
<!--    // 分页-->
<!--    const pagination = {-->
<!--      prev:()=>{-->
<!--        return h(-->
<!--            NIcon,-->
<!--            {-->
<!--              onClick:()=>{-->
<!--                currentPage.value &#45;&#45;-->
<!--              }-->
<!--            },-->
<!--            {-->
<!--              default: () => h(LeftOutlined)-->
<!--            }-->
<!--        )-->
<!--      },-->
<!--      next:()=>{-->
<!--        return h(-->
<!--            NIcon,-->
<!--            {-->
<!--              onClick:()=>{-->
<!--                currentPage.value ++-->
<!--              }-->
<!--            },-->
<!--            {-->
<!--              default: () => h(RightOutlined)-->
<!--            }-->
<!--        )-->
<!--      },-->
<!--      prefix:()=>{-->
<!--        const range = [currentPage.value * 10 - 9, currentPage.value * 2];-->

<!--        if (currentPage.value <= 1) {-->
<!--          return `第 1 条到第 ${range[1]} 条 / 总共 ${total.value} 条`;-->
<!--        }else if (currentPage.value >= page.value) {-->
<!--          return `第 ${range[0]} 条到第 ${total.value} 条 / 总共 ${total.value} 条`;-->
<!--        }else if (currentPage.value > 1 && currentPage.value < page.value) {-->
<!--          return `第 ${range[0]} 条到第 ${range[1]} 条 / 总共 ${total.value} 条`;-->
<!--        }-->
<!--      },-->
<!--    }-->


<!--    /*  工具栏  */-->
<!--    /*新建*/-->
<!--    // 显示模态框-->
<!--    const showModal = ref(false)-->
<!--    // 模态框样式-->
<!--    const bodyStyle = {-->
<!--      width: "640px"-->
<!--    }-->
<!--    const segmented = {-->
<!--      content: "soft",-->
<!--      footer: "soft"-->
<!--    }-->
<!--    // 取消模态框-->
<!--    function cancel() {-->
<!--      showModal.value = false-->
<!--    }-->
<!--    // 确定提交-->
<!--    function sure() {-->

<!--    }-->
<!--    // 表单信息-->
<!--    const formValue = ref({-->
<!--      user: {-->
<!--        name: "",-->
<!--        mobile: "",-->
<!--        password: '',-->
<!--      }-->
<!--    })-->
<!--    const selectValue = ref("1")-->
<!--    const selectOptions = ref([-->
<!--      {label: "启用", value: "1"},-->
<!--      {label: "禁用", value: "2"},-->
<!--    ])-->
<!--    // 验证规则-->
<!--    const rules = {-->
<!--      user: {-->
<!--        name: {-->
<!--          required: true,-->
<!--          trigger: "blur",-->
<!--        },-->
<!--        mobile: {-->
<!--          required: true,-->
<!--          trigger: "blur",-->
<!--        },-->
<!--        password: {-->
<!--          required: true,-->
<!--          trigger: "blur",-->
<!--        },-->
<!--      }-->
<!--    };-->
<!--    // 表单必填提示-->
<!--    const messages = {-->
<!--      required: "这是必填项！"-->
<!--    }-->


<!--    /*刷新*/-->
<!--    // 加载-->
<!--    const loading = ref(false)-->
<!--    // 刷新-->
<!--    function refresh() {-->
<!--      loading.value = true-->
<!--      setTimeout(() => {-->
<!--        // getData()-->
<!--        loading.value = false-->
<!--      }, 1000)-->
<!--    }-->

<!--    /*密度*/-->
<!--    // 密度事件数据-->
<!--    const densityOptions = [-->
<!--      {-->
<!--        label: "默认",-->
<!--        value: "large"-->
<!--      },-->
<!--      {-->
<!--        label: "中等",-->
<!--        value: "medium"-->
<!--      },-->
<!--      {-->
<!--        label: "紧密",-->
<!--        value: "small",-->
<!--      },-->
<!--    ]-->
<!--    const densityValue = ref('medium')-->

<!--    /*列设置*/-->
<!--    // 复选框全选-->
<!--    const allChecked = ref(true)-->
<!--    // 复选框列表-->
<!--    const checkboxList = ref([])-->
<!--    // 列表添加数据-->
<!--    for (let i = 0;i < columns.length; i++){-->
<!--      checkboxList.value.push({name: columns[i].title, checked: true})-->
<!--    }-->
<!--    // 全选改变事件-->
<!--    const allChange = ()=>{-->
<!--      if (allChecked.value) {-->
<!--        checkboxList.value.forEach(item => {item.checked = true})-->

<!--      } else {-->
<!--        checkboxList.value.forEach(item => {item.checked = false})-->
<!--        // columns.forEach(item => {item.checked = false})-->
<!--      }-->
<!--    }-->
<!--    // 复选框单个改变事件-->
<!--    const itemChange = ()=>{-->
<!--      if (checkboxList.value.every(item => item.checked)) {-->
<!--        allChecked.value = true-->
<!--      } else {-->
<!--        allChecked.value = false-->
<!--      }-->
<!--    }-->



<!--    onMounted(()=>{-->
<!--      // 调用数据-->
<!--      // getData()-->

<!--    })-->

<!--    return {-->
<!--      showModal,-->
<!--      bodyStyle,-->
<!--      segmented,-->
<!--      cancel,-->
<!--      sure,-->
<!--      formValue,-->
<!--      rules,-->
<!--      messages,-->
<!--      selectValue,-->
<!--      selectOptions,-->
<!--      densityOptions,-->
<!--      densityValue,-->
<!--      data,-->
<!--      columns,-->
<!--      pagination,-->
<!--      loading,-->
<!--      refresh,-->
<!--      page,-->
<!--      checkboxList,-->
<!--      allChecked,-->
<!--      allChange,-->
<!--      itemChange-->


<!--    }-->
<!--  }-->

<!--})-->
<!--</script>-->

<!--<style scoped>-->
=======
>>>>>>> 57906bfa1013088cca202b3be8b4c884761a9197

<!--</style>-->